
<template>
  <div class="edit-main-box">
    <el-form
      :disabled="type === 'detail'"
      ref="form"
      :model="ruleForm"
      :rules="rules"
      style="width: 700px"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="标题" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入" maxlength="50" />
      </el-form-item>
      <el-form-item label="副标题" prop="subtitle">
        <el-input
          v-model="ruleForm.subtitle"
          placeholder="请输入"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item label="类型" prop="page">
        <div class="flex-row">
          <Select
            v-model="ruleForm.page"
            class="flex1"
            :list="lst_cate"
            label-field="name"
            value-field="id"
            :show-all="false"
          />
          <i class="el-icon-circle-plus" @click="addCate" />
        </div>
      </el-form-item>
    </el-form>
    <Page :type="type" ref="page" :content="ruleForm.content" />

    <div class="submitBtn">
      <el-button
        v-if="type !== 'detail'"
        class="mt10"
        type="primary"
        @click="onSubmit"
        >保 存</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getCateList,
  addPage,
  getPageDetail,
  editPage,
  addCate,
  trans
} from "@/api/index";
import Select from "@/components/Select/index.vue";
import Page from "@/views/components/page.vue";
export default {
  name: "AddPage",
  components: { Select, Page },
  props: {
    /** 类型  14新闻 15下载 16媒体 */
    type: {
      type: String,
      default: "14",
    },
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        subtitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        page: [{ required: true, message: "请选择", trigger: "change" }],
      },
      lst_cate: [],
      id: null,
      type: "add",
    };
  },
  async created() {
    this.getCate(async () => {
      if (this.$route.query.id) {
        this.id = this.$route.query.id;
        this.type = this.$route.query.type || "add";
        let res = await getPageDetail({ id: this.$route.query.id });
        this.ruleForm = res.data;
        this.ruleForm.content = JSON.parse(this.ruleForm.content);
      }
    });
  },
  methods: {
    async getCate(fn) {
      const res = await getCateList({ pid: this.type });
      res.data.forEach((v) => {
        v.id = v.id.toString();
      });
      this.lst_cate = res.data || [];
      fn && fn();
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    addCate() {
      this.$prompt("请输入类型名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async ({ value }) => {
        await addCate({ pid: this.type, name: value });
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.getCate();
      });
    },
    async onSubmit() {
      await this.$refs.form.validate();
      let content = await this.$refs.page.getContainer();
      let formData = new FormData();
      formData.append("name", this.ruleForm.name);
      formData.append("subtitle", this.ruleForm.subtitle);
      formData.append("page", this.ruleForm.page);
      formData.append("content", JSON.stringify(content || ""));
      this.id !== null && formData.append("id", this.id);
      let fetchApi = this.id !== null ? editPage : addPage;
      await fetchApi(formData);
      if (this.id) {
        await trans(this.id)
      }
      this.$message({
        type: "success",
        message: "成功",
      });
      this.id === null && this.$router.push("/pages");
    },
  },
};
</script>
<style lang="scss">
.edit-main-box {
  .add-box {
    background-color: #2d82f8;
  }

  .el-icon-circle-plus {
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    color: #409eff;
  }
}
.submitBtn{
  text-align: center;
  border-top: 1px solid #eee;
  width: 96%;
  margin: 40px auto;
}
.submitBtn button{
  width: 200px;
}
</style>